"use client"

import { useState } from "react"
import { View, Text, TextInput, TouchableOpacity, StyleSheet, SafeAreaView, ScrollView } from "react-native"
import { useDeviceInfo } from "../hooks/useDeviceInfo"
import { createResponsiveStyles } from "../styles/responsive"

interface LoginScreenProps {
  onLogin: () => void
}

export default function LoginScreen({ onLogin }: LoginScreenProps) {
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const deviceInfo = useDeviceInfo()
  const responsive = createResponsiveStyles(deviceInfo)
  const styles = createStyles(responsive, deviceInfo)

  return (
    <SafeAreaView style={styles.container}>
      <ScrollView contentContainerStyle={styles.scrollContent}>
        {/* Header */}
        <View style={styles.header}>
          <View style={styles.headerContent}>
            <View style={styles.headerLeft}>
              <View style={styles.logo} />
              <Text style={styles.headerTitle}>ESP32 TRAINING</Text>
            </View>
            {!deviceInfo.isSmallPhone && (
              <View style={styles.headerRight}>
                <Text style={styles.headerLink}>训练系统</Text>
                <Text style={styles.headerLink}>数据分析</Text>
                <Text style={styles.headerLink}>设备管理</Text>
              </View>
            )}
          </View>
          <View style={styles.headerBorder} />
        </View>

        <View style={styles.mainContent}>
          {/* Title Section */}
          <View style={styles.titleSection}>
            <Text style={styles.mainTitle}>REACTION_{"\n"}TRAINING</Text>
            <Text style={styles.subtitle}>通过ESP32设备进行专业反应力训练</Text>
          </View>

          {/* Content Layout - 根据设备调整 */}
          {deviceInfo.isTablet && responsive.isLandscape ? (
            // 平板横屏：使用三栏布局
            <View style={styles.tabletLayout}>
              <View style={styles.leftColumn}>
                <Text style={styles.sidebarTitle}>系统概览</Text>
                <View style={styles.sidebarContent}>
                  <Text style={styles.sidebarItem}>• 物理交互训练</Text>
                  <Text style={styles.sidebarItem}>• 实时反应测量</Text>
                  <Text style={styles.sidebarItem}>• 数据驱动分析</Text>
                </View>
              </View>

              <View style={styles.centerColumn}>
                <View style={styles.loginForm}>
                  <View style={styles.formHeader}>
                    <Text style={styles.formTitle}>用户登录</Text>
                    <View style={styles.orangeDot} />
                  </View>

                  <View style={styles.formContent}>
                    <View style={styles.inputGroup}>
                      <Text style={styles.inputLabel}>邮箱地址</Text>
                      <TextInput
                        style={styles.input}
                        value={email}
                        onChangeText={setEmail}
                        placeholder="请输入邮箱地址"
                        keyboardType="email-address"
                        autoCapitalize="none"
                      />
                    </View>

                    <View style={styles.inputGroup}>
                      <Text style={styles.inputLabel}>密码</Text>
                      <TextInput
                        style={styles.input}
                        value={password}
                        onChangeText={setPassword}
                        placeholder="请输入密码"
                        secureTextEntry
                      />
                    </View>

                    <TouchableOpacity style={styles.loginButton} onPress={onLogin}>
                      <Text style={styles.loginButtonText}>开始训练</Text>
                    </TouchableOpacity>
                  </View>
                </View>
              </View>

              <View style={styles.rightColumn}>
                <Text style={styles.sidebarTitle}>系统特性</Text>
                <View style={styles.statsContainer}>
                  <View style={styles.statCard}>
                    <Text style={styles.statValue}>8</Text>
                    <Text style={styles.statLabel}>LED训练点</Text>
                  </View>
                  <View style={styles.statCard}>
                    <Text style={styles.statValue}>1ms</Text>
                    <Text style={styles.statLabel}>精度测量</Text>
                  </View>
                  <View style={styles.statCard}>
                    <Text style={styles.statValue}>100%</Text>
                    <Text style={styles.statLabel}>实时反馈</Text>
                  </View>
                </View>
              </View>
            </View>
          ) : (
            // 手机和平板竖屏：使用垂直布局
            <View style={styles.mobileLayout}>
              {/* Login Form */}
              <View style={styles.loginSection}>
                <View style={styles.loginForm}>
                  <View style={styles.formHeader}>
                    <Text style={styles.formTitle}>用户登录</Text>
                    <View style={styles.orangeDot} />
                  </View>

                  <View style={styles.formContent}>
                    <View style={styles.inputGroup}>
                      <Text style={styles.inputLabel}>邮箱地址</Text>
                      <TextInput
                        style={styles.input}
                        value={email}
                        onChangeText={setEmail}
                        placeholder="请输入邮箱地址"
                        keyboardType="email-address"
                        autoCapitalize="none"
                      />
                    </View>

                    <View style={styles.inputGroup}>
                      <Text style={styles.inputLabel}>密码</Text>
                      <TextInput
                        style={styles.input}
                        value={password}
                        onChangeText={setPassword}
                        placeholder="请输入密码"
                        secureTextEntry
                      />
                    </View>

                    <TouchableOpacity style={styles.loginButton} onPress={onLogin}>
                      <Text style={styles.loginButtonText}>开始训练</Text>
                    </TouchableOpacity>
                  </View>
                </View>
              </View>

              {/* Stats Section */}
              <View style={styles.statsSection}>
                <View style={styles.sidebarContent}>
                  <Text style={styles.sidebarTitle}>系统概览</Text>
                  <View style={styles.overviewContent}>
                    <Text style={styles.sidebarItem}>• 物理交互训练</Text>
                    <Text style={styles.sidebarItem}>• 实时反应测量</Text>
                    <Text style={styles.sidebarItem}>• 数据驱动分析</Text>
                  </View>
                </View>

                <View style={styles.sidebarContent}>
                  <Text style={styles.sidebarTitle}>系统特性</Text>
                  <View style={styles.statsGrid}>
                    <View style={styles.statCard}>
                      <Text style={styles.statValue}>8</Text>
                      <Text style={styles.statLabel}>LED训练点</Text>
                    </View>
                    <View style={styles.statCard}>
                      <Text style={styles.statValue}>1ms</Text>
                      <Text style={styles.statLabel}>精度测量</Text>
                    </View>
                    <View style={styles.statCard}>
                      <Text style={styles.statValue}>100%</Text>
                      <Text style={styles.statLabel}>实时反馈</Text>
                    </View>
                  </View>
                </View>
              </View>
            </View>
          )}
        </View>
      </ScrollView>
    </SafeAreaView>
  )
}

const createStyles = (responsive: any, deviceInfo: any) =>
  StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: "#ffffff",
    },
    scrollContent: {
      flexGrow: 1,
      padding: responsive.containerPadding,
    },
    header: {
      marginBottom: responsive.spacing.xxl,
    },
    headerContent: {
      flexDirection: "row",
      justifyContent: "space-between",
      alignItems: "center",
      paddingBottom: responsive.spacing.lg,
    },
    headerLeft: {
      flexDirection: "row",
      alignItems: "center",
    },
    logo: {
      width: responsive.sizes.header,
      height: responsive.sizes.header,
      backgroundColor: "#f97316",
      marginRight: responsive.spacing.md,
    },
    headerTitle: {
      fontSize: responsive.fontSize.sm,
      fontWeight: "500",
      color: "#000000",
    },
    headerRight: {
      flexDirection: "row",
      gap: responsive.spacing.lg,
    },
    headerLink: {
      fontSize: responsive.fontSize.sm,
      color: "#666666",
    },
    headerBorder: {
      height: 1,
      backgroundColor: "#e5e7eb",
    },
    mainContent: {
      flex: 1,
    },
    titleSection: {
      marginBottom: responsive.spacing.xl,
      paddingHorizontal: deviceInfo.isTablet ? 0 : responsive.spacing.md,
    },
    mainTitle: {
      fontSize: responsive.fontSize.title,
      fontWeight: "bold",
      color: "#000000",
      lineHeight: responsive.fontSize.title * 1.2,
      marginBottom: responsive.spacing.md,
    },
    subtitle: {
      fontSize: responsive.fontSize.lg,
      color: "#666666",
    },

    // 平板横屏布局
    tabletLayout: {
      flexDirection: "row",
      gap: responsive.spacing.xl,
    },
    leftColumn: {
      flex: 1,
      paddingRight: responsive.spacing.lg,
      borderRightWidth: 1,
      borderRightColor: "#e5e7eb",
    },
    centerColumn: {
      flex: 2,
    },
    rightColumn: {
      flex: 1,
      paddingLeft: responsive.spacing.lg,
      borderLeftWidth: 1,
      borderLeftColor: "#e5e7eb",
    },

    // 手机布局
    mobileLayout: {
      gap: responsive.spacing.xl,
    },
    loginSection: {
      paddingHorizontal: deviceInfo.isTablet ? 0 : responsive.spacing.md,
    },
    statsSection: {
      paddingHorizontal: deviceInfo.isTablet ? 0 : responsive.spacing.md,
      gap: responsive.spacing.lg,
    },

    sidebarContent: {
      marginBottom: responsive.spacing.lg,
    },
    sidebarTitle: {
      fontSize: responsive.fontSize.sm,
      fontWeight: "500",
      color: "#666666",
      marginBottom: responsive.spacing.md,
    },
    overviewContent: {
      gap: responsive.spacing.sm,
    },
    sidebarItem: {
      fontSize: responsive.fontSize.sm,
      color: "#000000",
    },
    statsGrid: {
      flexDirection: "row",
      flexWrap: "wrap",
      gap: responsive.spacing.md,
    },
    statsContainer: {
      gap: responsive.spacing.md,
    },
    loginForm: {
      borderWidth: 1,
      borderColor: "#e5e7eb",
      padding: responsive.spacing.xl,
    },
    formHeader: {
      flexDirection: "row",
      justifyContent: "space-between",
      alignItems: "center",
      marginBottom: responsive.spacing.lg,
    },
    formTitle: {
      fontSize: responsive.fontSize.xl,
      fontWeight: "bold",
      color: "#000000",
    },
    orangeDot: {
      width: 12,
      height: 12,
      backgroundColor: "#f97316",
      borderRadius: 6,
    },
    formContent: {
      gap: responsive.spacing.lg,
    },
    inputGroup: {
      gap: responsive.spacing.xs,
    },
    inputLabel: {
      fontSize: responsive.fontSize.sm,
      fontWeight: "500",
      color: "#374151",
    },
    input: {
      height: responsive.sizes.input,
      borderWidth: 1,
      borderColor: "#d1d5db",
      paddingHorizontal: responsive.spacing.md,
      fontSize: responsive.fontSize.md,
      backgroundColor: "#ffffff",
    },
    loginButton: {
      height: responsive.sizes.button,
      backgroundColor: "#f97316",
      justifyContent: "center",
      alignItems: "center",
    },
    loginButtonText: {
      fontSize: responsive.fontSize.md,
      fontWeight: "500",
      color: "#ffffff",
    },
    statCard: {
      borderWidth: 1,
      borderColor: "#e5e7eb",
      padding: responsive.spacing.md,
      flex: deviceInfo.isTablet ? 0 : 1,
      minWidth: deviceInfo.isSmallPhone ? "100%" : deviceInfo.isTablet ? 120 : "45%",
    },
    statValue: {
      fontSize: responsive.fontSize.xxl,
      fontWeight: "bold",
      color: "#000000",
      marginBottom: 4,
    },
    statLabel: {
      fontSize: responsive.fontSize.sm,
      color: "#666666",
    },
  })
